<template>
	<div class="single-result-show-area">
		<div class="left">
			<ve-histogram :data="wordFrequencyData" :settings="wordFrequencySettings" :extend="wordFrequencyExtend" ref="wordFrequency"></ve-histogram>
		</div>
		<div class="right">
			<div class="set-top">
				<span class="name">topN：</span>
				<el-input-number size="small" v-model="topN" :min="1" :max="10" label="描述文字"></el-input-number>
			</div>
			<div class="right-value">
				<div class="each-right-value" v-for="(item, index) in wordFrequencyData.rows" :key="index">{{ (index + 1) }}： {{ item.word }}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {

	props: {
		showData: { type: Object }
	},
	
	data: function () {
		return {

			wordFrequencyData: {
        columns: ["word", "count"],
        rows: [],
      },

			wordFrequencySettings: {
        labelMap: {
          count: "词频topN",
        },
      },

			wordFrequencyExtend: {
				grid: {
					x: 20,
					x2: 20,
					y2: 0
				}
			},

			topN: 3, // 显示前几的数据

		}
	},

	watch: {
		showData: function (newValue, oldValue) {
			if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
				this.renderChart();
			}
		},
		
		topN: function (newValue, oldValue) {
			if (newValue != oldValue) {
				this.renderChart();
			}
		},
	},

	methods: {

		// 渲染图形
		renderChart: function () {
			var data = this.showData.frequencySet;
			if (data && data.length) {
				data = data.sort(function (a, b) {
					return b.count - a.count;
				})
				this.wordFrequencyData = {
					columns: ["word", "count"],
					rows: data.slice(0, this.topN)
				}
				this.$refs[`wordFrequency`].echarts.resize();
			}
		},

	}

}
</script>

<style lang="less" scoped>
	.single-result-show-area {
		width: 100%;
		height: calc(~'100% - 60px');
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.left, .right {
		float: left;
		height: 100%;
		overflow: auto;
	}

	.right-value {
		margin-top: 15px;
    padding-top: 15px;
    border-top: solid 1px #f0f0f0;
    padding-left: 15px;
	}

	.left {
		width: 65%;
		border-right: solid 1px #e6e6e6;
	}

	.right {
		width: calc(~'35% - 1px');
		box-sizing: border-box;
		padding: 0 20px;
	}

	.left-value {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.right-name {
		font-family: PingFangSC-Regular;
		letter-spacing: 1px;
		font-size: 18px;
		padding-left: 10px;
		font-weight: 500;
		color: #333333;
	}

	.each-left-value, .each-right-value {
		color: #333333;
		margin: 6px;
		cursor: pointer;
	}
</style>
